<template>
  <div class="supplier">
    <el-card class="cardStyle">
      <div class="boss-title">会员折扣设置-瑞可丽医疗器械</div>
    </el-card>

    <div class="outerTable">
      <el-tabs type="card" @tab-click="onTabClick" v-model="supplierDataList.auditStatus">

        <el-tab-pane lazy label="会员列表" name="memberList">
          <MemberList @setLoadData="loadData" :memberDataList="supplierDataList.memberListData"></MemberList>
        </el-tab-pane>

        <el-tab-pane lazy label="等级设置" name="setLevel">
          <LevelEditPage ref="editPageRef"></LevelEditPage>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/api'
import MemberList from '@/pages/member/components/membrList.vue'
import LevelEditPage from '@/pages/member/components/levelEditPage.vue'

/********************************/
const route = useRoute()
const customerId = route.params.id
const editPageRef = ref(null)
// COMMIT 审核中 REJECT 被驳回 PASS 已通过
const supplierDataList = reactive({
  auditStatus: 'memberList',
  memberListData: []
})
const onTabClick = (tab) => {
  supplierDataList.auditStatus = tab.props.name
  if (tab.props.name === 'setLevel' && editPageRef.value) {
    editPageRef.value.loadData()
  }
}
// 初始化数据
const loadData = async () => {
  let url = `/medinstrument/boss/member/getMemberItemList?supplierId=${customerId}`
  let memberData = await api.get(url)
  supplierDataList.memberListData = memberData.data
}
onMounted(async () => {
  await loadData()
})
</script>
<style lang="scss" scoped>

.table {
  border-collapse: collapse;
  width: 100%;

  th {
    background: #FAFAFA;
    height: 48px;
  }

  .table_header_title {
    height: 30px;
    color: #909399;
  }

  .table_tbody {
    tr {
      height: 49px;

      td {
        line-height: 18px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding: 5px;
      }

      .amountStyle {
        box-sizing: border-box;
        display: flex;
        width: 160px;
        background-color: red;
        flex-wrap: wrap;
        overflow: hidden;
        min-height: 20px;
        max-height: 50px;
      }
    }
  }
}

.cardStyle {
  height: 60px;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.boss-title {
  font-size: 16px;
  color: #303133;
  letter-spacing: 0;
  font-weight: 600;
}
</style>
